CSS Loogiset Ominaisuudet Taso 2: Todella Globaalin Verkon Rakentaminen Parannetulla Kirjoitusmuotojen Tuella

Vuosikymmeniä verkkokehittäjät ovat rakentaneet asetteluja fyysiseen maailmaan juurtuneella sanastolla: ylä-, ala-, vasen- ja oikea. Olemme määrittäneet margin-left, padding-top ja border-right. Tämä mielimalli palveli meitä hyvin, kun verkko oli pääasiassa vasemmalta oikealle, ylhäältä alas suuntautuva väline. Verkko on kuitenkin globaali. Se on alusta kaikille kielille ja kulttuureille, joista monet eivät noudata tätä yksinkertaista suuntavirtaa.

Kielet, kuten arabia ja heprea, kirjoitetaan oikealta vasemmalle. Perinteinen japanilainen ja kiinalainen voidaan kirjoittaa pystysuunnassa, ylhäältä alas ja oikealta vasemmalle. Fyysisen, vasemmalta oikealle suuntautuvan CSS-mallin pakottaminen näihin kirjoitusjärjestelmiin johtaa rikkoutuneisiin asetteluihin, turhauttavaan käyttökokemukseen ja valtavaan määrään koodin ylikirjoituksia. Tässä tulevat CSS Loogiset Ominaisuudet ja Arvot, jotka edustavat perustavanlaatuista paradigman muutosta fyysisistä suuntauksista virtaukseen sidonnaisiin, loogisiin suuntauksiin. Vaikka Taso 1 loi perustan, CSS Loogiset Ominaisuudet Taso 2 täydentää kuvan tarjoamalla työkalut, joita tarvitsemme todella universaalien, kirjoitusmuodoltaan tietoisien käyttöliittymien rakentamiseen.

Tämä kattava opas vie sinut syväsukellukseen Tason 2 tuomien parannusten pariin. Aloitamme keskeisten käsitteiden kertauksella, sitten tutkimme uusia ominaisuuksia ja arvoja, jotka täyttävät aukot, ja lopuksi laitamme kaiken käytäntöön rakentamalla komponentin, joka mukautuu saumattomasti mihin tahansa kirjoitusmuotoon. Valmistaudu muuttamaan tapaasi ajatella CSS-asettelua ikuisesti.

Nopea kertaus: Loogisten Ominaisuuksien Peruskäsitteet (Taso 1)

Ennen kuin voimme arvostaa Tason 2 lisäyksiä, meidän on ymmärrettävä syvällisesti Tason 1 luoma perusta. Koko järjestelmä rakentuu kahdelle keskeiselle käsitteelle: kirjoitusmuoto ja siitä seuraavat lohko- ja rivinsisäiset akselit.

Neljä Kirjoitusmuotoa

writing-mode CSS-ominaisuus määrittää tekstin suunnan asettelussa. Vaikka usein otamme oletusasetuksen itsestäänselvyytenä, on olemassa useita arvoja, jotka muuttavat perustavanlaatuisesti sisällön virtausta sivulla:

• horizontal-tb: Tämä on oletus useimmille länsimaisille kielille. Teksti virtaa vaakasuunnassa (rivinsisäinen akseli) vasemmalta oikealle (tai oikealta vasemmalle suunnan perusteella), ja rivit pinotaan ylhäältä alas (lohkoakseli).
• vertical-rl: Käytetään perinteisessä itäaasialaisessa typografiassa (esim. japanin, kiinan kielessä). Teksti virtaa pystysuunnassa ylhäältä alas (rivinsisäinen akseli), ja rivit pinotaan oikealta vasemmalle (lohkoakseli).
• vertical-lr: Samankaltainen kuin edellä, mutta rivit pinotaan vasemmalta oikealle (lohkoakseli). Vähemmän yleinen, mutta käytetään joissakin yhteyksissä, kuten mongolialaisessa kirjaimistossa.
• sidelong-rl / sidelong-lr: Nämä ovat erityistapauksiin, joissa halutaan asettaa glyyfit sivuttain. Ne ovat harvinaisempia yleisessä verkkosisällössä.

Kriittinen Käsitys: Lohko vs. Rivinsisäinen Akseli

Tämä on tärkein käsite ymmärtää. Loogisessa maailmassa lopetamme ajattelemisen "pystysuuntaisesta" ja "vaakasuuntaisesta" ja alamme ajatella lohko- ja rivinsisäisten akselien termein. Niiden suunta riippuu täysin kirjoitusmuodosta.

• Rivinsisäinen Akseli on suunta, johon teksti virtaa yhden rivin sisällä.
• Lohkoakseli on suunta, johon uudet rivit pinotaan.

Näin tämä ilmenee:

• Normaalissa englannissa (writing-mode: horizontal-tb): Rivinsisäinen akseli kulkee vaakasuunnassa ja lohkoakseli pystysuunnassa.
• Perinteisessä japanissa (writing-mode: vertical-rl): Rivinsisäinen akseli kulkee pystysuunnassa ja lohkoakseli vaakasuunnassa.

Koska nämä akselit voivat vaihtua, ominaisuudet, kuten width ja height, muuttuvat epäselviksi. Onko width koko vaakasuuntaista akselia vai rivinsisäistä akselia pitkin? Loogiset ominaisuudet ratkaisevat tämän epäselvyyden. Nyt meillä on alku ja loppu jokaiselle akselille:

• block-start: "Ylä" englanniksi, mutta "oikea" pystysuuntaisessa japanissa.
• block-end: "Ala" englanniksi, mutta "vasen" pystysuuntaisessa japanissa.
• inline-start: "Vasen" englanniksi, mutta "ylä" pystysuuntaisessa japanissa.
• inline-end: "Oikea" englanniksi, mutta "ala" pystysuuntaisessa japanissa.

Fyysisten ja Loogisten Ominaisuuksien Kartoitus (Taso 1)

Taso 1 esitteli kattavan joukon kartoituksia fyysisistä loogisiin ominaisuuksiin. Tässä muutamia keskeisiä esimerkkejä:

• width → inline-size
• height → block-size
• min-width → min-inline-size
• max-height → max-block-size
• margin-left → margin-inline-start
• margin-right → margin-inline-end
• margin-top → margin-block-start
• margin-bottom → margin-block-end
• padding-left → padding-inline-start
• padding-top → padding-block-start
• border-right → border-inline-end
• border-bottom → border-block-end
• left / right (asemointiin) → inset-inline-start / inset-inline-end
• top / bottom (asemointiin) → inset-block-start / inset-block-end

Taso 1 antoi meille myös hyödyllisiä lyhenteitä, kuten margin-inline (alkuun ja loppuun) ja padding-block (alkuun ja loppuun).

Tervetuloa Tasolle 2: Mitä Uutta ja Miksi Se Merkitsee

Vaikka Taso 1 oli monumentaalinen askel eteenpäin, se jätti joitain huomattavia aukkoja. Tietyillä perustavanlaatuisilla CSS-ominaisuuksilla, kuten float, clear ja resize, ei ollut loogisia vastineita. Lisäksi ominaisuuksia, kuten border-radius, ei voitu hallita loogisesti, mikä pakotti kehittäjät turvautumaan fyysisiin ominaisuuksiin hienojakoista tyylittelyä varten. Tämä tarkoitti, että saatoit rakentaa asettelun 90% valmiiksi loogisilla ominaisuuksilla, mutta tarvitsit silti fyysisiä ylikirjoituksia eri kirjoitusmuodoille, mikä osittain vesitti tarkoituksen.

CSS Loogiset Ominaisuudet Taso 2 ratkaisee nämä puutteet suoraan. Se ei esittele radikaalia uutta järjestelmää, vaan täydentää Tason 1 aloittamaa järjestelmää. Se saavuttaa tämän kahdella ensisijaisella tavalla:

1. Uusien loogisten ominaisuuksien ja arvojen esittely vanhemmille CSS-ominaisuuksille, jotka olivat luonnostaan fyysisiä (kuten float).
2. Loogisten ominaisuusvastineiden lisääminen monimutkaisille lyhenteille, jotka jätettiin aiemmin huomiotta (kuten border-radius).

Tason 2 myötä täysin virtaukseen sidotun tyylijärjestelmän visio on lähes valmis, mikä mahdollistaa monimutkaisten, kauniiden ja vankkojen komponenttien rakentamisen, jotka toimivat kaikkialla, kaikille, ilman temppuja tai ylikirjoituksia.

Syväsukellus: Uudet Loogiset Arvot ja Ominaisuudet Tasolla 2

Tutustutaanpa merkittävimpiin lisäyksiin, joita Taso 2 tuo kehittäjätyökalupakkiimme. Nämä ovat työkaluja, jotka täyttävät aukot ja mahdollistavat todella universaalin komponenttisunnittelun.

Float ja Clear: Looginen Vallankumous

float-ominaisuus on ollut CSS-asettelun perusta vuosia, mutta sen arvot left ja right ovat fyysisen suunnan määritelmä. Jos kellutat kuvan vasemmalle puolelle kappaletta englanniksi, se näyttää oikealta. Mutta vaihda dokumentin suunta oikealta vasemmalle (RTL) arabiaa varten, ja kuva on nyt tekstilohkon "väärällä" puolella. Sen pitäisi olla oikealla, joka on rivin alku.

Taso 2 esittelee kaksi uutta, loogista avainsanaa float-ominaisuudelle:

• float: inline-start; Tämä kelluttaa elementin rivinsuuntaisen alkuun. LTR-kielissä tämä on vasen. RTL-kielissä se on oikea. vertical-rl-kirjoitusmuodossa se on yläosa.
• float: inline-end; Tämä kelluttaa elementin rivinsuuntaiseen loppuun. LTR:ssä tämä on oikea. RTL:ssä se on vasen. vertical-rl:ssä se on alaosa.

Vastaavasti clear-ominaisuus, jota käytetään hallitsemaan sisältöjen kietoutumista kelluvien elementtien ympärille, saa loogiset vastineensa:

• clear: inline-start; Tyhjentää kellutukset rivinsisäisen alun puolella.
• clear: inline-end; Tyhjentää kellutukset rivinsisäisen loppuosan puolella.

Tämä on pelin muuttaja. Voit nyt luoda klassisia kuva-teksti-kääre-asetteluja, jotka mukautuvat automaattisesti mihin tahansa kielisuuntaan ilman yhtäkään ylimääräistä CSS-riviä.

Parannettu Hallinta Loogisella Resize-toiminnolla

resize-ominaisuus, jota käytetään yleisesti textarea-elementissä, antaa käyttäjille mahdollisuuden muuttaa elementin kokoa. Sen perinteiset arvot ovat horizontal, vertical ja both. Mutta mitä "horizontal" tarkoittaa pystysuuntaisessa kirjoitusmuodossa? Se tarkoittaa edelleen koon muuttamista fyysistä vaakasuuntaista akselia pitkin, mikä ei ehkä ole käyttäjän tai suunnittelijan tarkoitus. Käyttäjä todennäköisesti haluaa muuttaa elementin kokoa rivinsisäistä akselia pitkin tehdäkseen riveistä pidempiä tai lyhyempiä.

Taso 2 esittelee loogiset arvot resize-ominaisuudelle:

• resize: inline; Mahdollistaa koon muuttamisen rivinsisäistä akselia pitkin.
• resize: block; Mahdollistaa koon muuttamisen lohkoakselia pitkin.

Käyttämällä resize: block; teksti-alueessa englanniksi, käyttäjä voi tehdä siitä korkeamman. Käyttämällä sitä pystysuuntaisessa kirjoitusmuodossa, käyttäjä voi tehdä siitä leveämmän (mikä on lohkoakselin suunta). Se vain toimii.

`caption-side`: Looginen Asemointi Taulukoiden Kuvateksteille

caption-side-ominaisuus määrittää taulukon caption-elementin sijoittelun. Vanhat arvot olivat top ja bottom. Jälleen kerran, nämä ovat fyysisiä. Jos suunnittelijan tarkoitus on sijoittaa kuvateksti taulukon sisällön "eteen", top toimii vaakasuuntaisissa kirjoitusmuodoissa. Mutta vertical-rl-muodossa lohkovirran "alku" on oikealla, ei ylhäällä.

Taso 2 tarjoaa loogisen ratkaisun:

• caption-side: block-start; Sijoittaa kuvatekstin lohkavirran alkuun.
• caption-side: block-end; Sijoittaa kuvatekstin lohkavirran loppuun.

`text-align`: Perustavanlaatuinen Looginen Arvo

Vaikka start- ja end-arvot text-align-ominaisuudelle ovat olleet olemassa jo jonkin aikaa, ne ovat keskeinen osa loogisten ominaisuuksien filosofiaa ja niiden vahvistaminen on tärkeää. text-align: left; -arvon käyttö on yleinen virhe, joka aiheuttaa välittömästi asetteluvirheitä RTL-kielissä. Oikea, moderni lähestymistapa on aina käyttää:

• text-align: start; Tasaa tekstin rivinsisäisen suunnan alkuun.
• text-align: end; Tasaa tekstin rivinsisäisen suunnan loppuun.

Tason 2 Kruununjalokivi: Looginen `border-radius`

Ehkä merkittävin ja tehokkain lisäys Tasolla 2 on ominaisuuksien joukko reunojen säteiden loogiseen hallintaan. Aiemmin, jos halusit kortin pyöristetyt kulmat vain "yläosassa", käytit border-top-left-radius ja border-top-right-radius. Tämä epäonnistuu täysin pystysuuntaisessa kirjoitusmuodossa, jossa "yläosan" kulmat ovat nyt start-start- ja end-start-kulmat.

Taso 2 esittelee neljä uutta pitkämuotoista ominaisuutta, jotka vastaavat elementin neljää kulmaa virtaukseen sidottuna. Nimeämiskäytäntö on border-[block-edge]-[inline-edge]-radius.

• border-start-start-radius: Kulma, jossa lohko-alku- ja rivinsisäinen-alku-sivut kohtaavat.
• border-start-end-radius: Kulma, jossa lohko-alku- ja rivinsisäinen-loppu-sivut kohtaavat.
• border-end-start-radius: Kulma, jossa lohko-loppu- ja rivinsisäinen-alku-sivut kohtaavat.
• border-end-end-radius: Kulma, jossa lohko-loppu- ja rivinsisäinen-loppu-sivut kohtaavat.

Tämä voi olla vaikea visualisoida aluksi, joten kartoitetaan se eri kirjoitusmuodoille:

`border-radius` Kartoitus `writing-mode: horizontal-tb` (esim. englanti)

• border-start-start-radius vastaa top-left-radius.
• border-start-end-radius vastaa top-right-radius.
• border-end-start-radius vastaa bottom-left-radius.
• border-end-end-radius vastaa bottom-right-radius.

`border-radius` Kartoitus `writing-mode: horizontal-tb` `dir="rtl"` kanssa (esim. arabia)

Tässä rivinsisäinen suunta on käännetty.

• border-start-start-radius vastaa top-right-radius. (Lohko-alku on yläosa, rivinsisäinen-alku on oikea).
• border-start-end-radius vastaa top-left-radius.
• border-end-start-radius vastaa bottom-right-radius.
• border-end-end-radius vastaa bottom-left-radius.

`border-radius` Kartoitus `writing-mode: vertical-rl` (esim. japani)

Tässä molemmat akselit on kierrettu.

• border-start-start-radius vastaa top-right-radius. (Lohko-alku on oikea, rivinsisäinen-alku on yläosa).
• border-start-end-radius vastaa bottom-right-radius.
• border-end-start-radius vastaa top-left-radius.
• border-end-end-radius vastaa bottom-left-radius.

Käyttämällä näitä uusia ominaisuuksia voit määritellä kulmasäteet, jotka ovat semanttisesti sidottuja sisällön virtaukseen, eivät fyysiseen näyttöön. "Alku-alku"-kulma on aina oikea kulma, kielestä tai tekstin suunnasta riippumatta.

Käytännön Toteutus: Globaaliin Valmiin Komponentin Rakentaminen

Teoria on hienoa, mutta katsotaanpa, miten tämä toimii käytännössä. Rakennamme yksinkertaisen profiilikorttikomponentin, ensin käyttäen vanhoja fyysisiä ominaisuuksia, ja sitten refaktoroimme sen käyttämään moderneja loogisia ominaisuuksia sekä Tasolta 1 että Tasolta 2.

Kortissa on kuva kellutettuna toiselle puolelle, otsikko, tekstiä ja koristeellinen reunus sekä pyöristetyt kulmat.

"Vanha" Tapa: Hauraat, Fyysiset Ominaisuudet -kortti

Näin saatimme tyylitellä tämän kortin muutama vuosi sitten:

/* --- CSS (Fyysiset Ominaisuudet) --- */

.physical-card {

  width: 300px;

  padding: 20px;

  margin-bottom: 20px;

  border: 1px solid #ccc;

  border-left: 5px solid steelblue;

  border-top-left-radius: 8px;

  border-bottom-left-radius: 8px;

}

.physical-card .avatar {

  float: left;

  width: 80px;

  height: 80px;

  margin-right: 15px;

}

.physical-card h3 {

  margin-top: 0;

  text-align: left;

}

Normaalissa englanninkielisessä LTR-kontekstissa tämä näyttää hyvältä. Mutta jos sijoitamme tämän säiliöön, jossa on dir="rtl" tai writing-mode: vertical-rl, asettelu rikkoutuu. Koristeellinen reunus on väärällä puolella, avatar on väärällä puolella, marginaali on virheellinen ja pyöristetyt kulmat ovat väärässä paikassa.

"Uusi" Tapa: Vankka, Looginen Ominaisuudet -kortti

Refaktoroidaanpa sama komponentti käyttämällä loogisia ominaisuuksia. Hyödynnämme sekä Tason 1 että Tason 2 uusien ominaisuuksien ominaisuuksia.

/* --- CSS (Loogiset Ominaisuudet) --- */

.logical-card {

  inline-size: 300px;

  padding: 20px; /* `padding` lyhenne on jo looginen! */

  margin-block-end: 20px;

  border: 1px solid #ccc;

  border-inline-start: 5px solid darkcyan;

  border-start-start-radius: 8px; /* Tason 2 Voimaa! */

  border-end-start-radius: 8px; /* Tason 2 Voimaa! */

}

.logical-card .avatar {

  float: inline-start; /* Tason 2 Voimaa! */

  inline-size: 80px;

  block-size: 80px;

  margin-inline-end: 15px;

}

.logical-card h3 {

  margin-block-start: 0;

  text-align: start;

}

Testaus ja Vahvistus

Tällä uudella CSS:llä voit pudottaa komponentin mihin tahansa säiliöön, ja se mukautuu automaattisesti.

• LTR-kontekstissa: Se näyttää identtiseltä alkuperäisen fyysisen version kanssa.
• RTL-kontekstissa (dir="rtl"): Avatar kelluu oikealle, sen marginaali on vasemmalla, koristeellinen reunus on oikealla ja teksti on tasattu alkuun (oikealle). Pyöristetyt kulmat ovat oikein ylä-oikealla ja ala-oikealla. Se vain toimii.
• Pystysuuntaisessa kontekstissa (writing-mode: vertical-rl): Kortin "leveys" (nyt sen pystysuuntainen inline-size) on 300px. Avatar kelluu "yläosaan" (inline-start) marginaalilla "alapuolellaan" (inline-end). Koristeellinen reunus on oikealla puolella (inline-start), ja pyöristetyt kulmat ovat ylä-oikealla ja ylä-vasemmalla. Komponentti on täysin orientoitunut uudelleen oikein ilman mediakyselyitä tai ylikirjoituksia.

Selainten Tuki ja Varmistukset

Kaikki tämä kuulostaa upealta, mutta entä selainten tuki? Hyvä uutinen on, että Tason 1 loogisten ominaisuuksien tuki on erinomainen kaikissa moderneissa selaimissa. Voit ja sinun tulisi käyttää ominaisuuksia, kuten margin-inline-start ja padding-block tänään.

Uusimpien Tason 2 ominaisuuksien tuki paranee nopeasti, mutta ei ole vielä universaalia. Loogiset arvot float-, clear- ja resize-ominaisuuksille ovat hyvin tuettuja. Loogiset border-radius-ominaisuudet ovat uusimpia ja voivat olla vielä ominaisuuslippujen takana tai viimeisimmissä selainversioissa. Kuten aina, sinun tulisi tarkistaa resurssit, kuten MDN Web Docs tai CanIUse.com, saadaksesi ajantasaisimmat yhteensopivuustiedot.

Strategiat Progressiiviseen Parannukseen

Koska CSS on suunniteltu kestämään, voimme helposti tarjota varmistuksia vanhemmille selaimille. Kaskadi varmistaa, että jos selain ei ymmärrä loogista ominaisuutta, se yksinkertaisesti jättää sen huomiotta ja käyttää aiemmin määriteltyä fyysistä ominaisuutta.

Näin voit kirjoittaa varmistusvalmiin CSS:n:

.card {

  /* Varmistus vanhemmille selaimille */

  border-left: 5px solid darkcyan;

  border-top-left-radius: 8px;

  /* Moderni looginen ominaisuus, joka ylikirjoittaa varmistuksen */

  border-inline-start: 5px solid darkcyan;

  border-start-start-radius: 8px;

}

Tämä lähestymistapa varmistaa vankan perustason kokemuksen kaikille, samalla kun se tarjoaa parannettuja, mukautuvia asetteluja moderneilla selaimilla oleville käyttäjille. Projekteille, jotka eivät vaadi useiden kirjoitusmuotojen tukea, tämä voi olla ylimitoitettua. Mutta kaikille globaaleille sovelluksille, suunnittelujärjestelmille tai teemoille tämä on vankka ja tulevaisuudenkestävä strategia.

Tulevaisuus on Looginen: Tason 2 Jälkeen

Siirtyminen fyysisestä loogiseen ajattelutapaan on yksi tärkeimmistä muutoksista modernissa CSS:ssä. Se yhdistää tyylittelykiellemme monimuotoisen, globaalin verkon todellisuuteen. Se siirtää meitä pois hauraista, näyttöön suuntautuneista hacks-ratkaisuista kohti kestäviä, sisältöön suuntautuneita suunnittelumalleja.

Onko aukkoja jäljellä? Muutamia. Loogisia arvoja ominaisuuksille, kuten background-position tai gradientit, keskustellaan edelleen. Mutta Tason 2 julkaisun myötä valtaosa päivittäisistä asettelu- ja tyylittelytehtävistä voidaan nyt suorittaa puhtaasti loogisella lähestymistavalla.

Kehittäjille suunnatut toimintakehotteet ovat selkeät: aloita käyttämään oletusarvoisesti loogisia ominaisuuksia. Tee inline-size ensisijaisesta valinnastasi width-ominaisuuden sijaan. Käytä margin-inline sen sijaan, että asettaisit vasemman ja oikean marginaalin erikseen. Kyse ei ole vain eri kielten tukemisesta; kyse on paremman, resilientimmän CSS:n kirjoittamisesta. Loogisilla ominaisuuksilla rakennettu komponentti on luonnostaan uudelleenkäytettävämpi ja mukautuvampi, käytettiinpä sitä sitten LTR-, RTL- tai pystysuuntaisessa asettelussa. Se on yksinkertaisesti parempaa insinöörityötä.

Johtopäätös: Hyväksy Virtaus

CSS Loogiset Ominaisuudet Taso 2 ei ole vain kokoelma uusia ominaisuuksia; se on vision täydentäminen. Se tarjoaa viimeiset, ratkaisevan tärkeät palat asettelujen rakentamiseen, jotka kunnioittavat sisältönsä luonnollista virtausta, mikä tahansa se virtaus sitten onkin. Ottamalla käyttöön ominaisuuksia, kuten float: inline-start ja border-start-start-radius, nostamme ammattitaitoamme pelkästä ruutujen sijoittelusta todella globaalien, osallistavien ja tulevaisuudenkestävien verkkokokemusten suunnitteluun.

Seuraavan kerran kun aloitat uuden projektin tai rakennat uuden komponentin, pysähdy ennen kuin kirjoitat margin-left. Kysy itseltäsi: "Tarkoitan vasenta vai tarkoitan alkua?" Tekemällä tämän pienen mielensisäisen siirtymän edistät mukautuvampaa ja saavutettavampaa verkkoa kaikille, kaikkialla.